﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{/layout/layout}">
<head>

</head>
<body>


<div id="content" layout:fragment="content">

    <!-- slider-area-start -->
    <div class="slider-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 hidden-sm hidden-xs"></div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="main-slider">
                        <div class="slider-container">
                            <!-- Slider Image -->
                            <div id="mainSlider" class="nivoSlider slider-image">

                                <span th:each="a:${news}">
                                    <a th:href="'/store/query?bookId='+${a.bookId}">
                                    <img th:unless="${#lists.isEmpty(a.newsPicture)}"
                                         th:src="${a.newsPicture}"
                                         alt="" style="width: 555px;height:370px;" title="#htmlcaption1"/>
                                    <img th:if="${#lists.isEmpty(a.newsPicture)}"
                                         src="https://i.loli.net/2019/05/31/5cf0deaecd94252145.jpg"
                                         style="width: 555px;height:370px;"
                                         alt="" title="#htmlcaption2"/>
                                        </a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="slider-product dotted-style-1 pt-30">
                        <div class="slider-product-active">
                            <div class="single-product single-product-sidebar white-bg" th:each="book:${books}">
                                <div class="product-img product-img-left">
                                    <a th:href="'/store/query?bookId='+${book.bookId}">
                                        <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                             th:src="${book.pictureContent[0].pictureContent}"
                                             style="width: 110.59px;height: 110.59px" alt=""/>
                                        <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                             alt="" style="width: 110.59px;height: 110.59px"/>
                                    </a>
                                </div>
                                <div class="product-content product-content-right">
                                    <div class="pro-title">
                                        <h4><a href="product-details.html" th:text="${book.bookName}">Lounge Chair</a>
                                        </h4>
                                    </div>
                                    <div class="pro-rating " th:text="'作者:&emsp;'+${book.author}">
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star-o"></i></a>
                                    </div>
                                    <div class="price-box">
                                        <span class="price product-price" th:text="${book.bookPrice}">$444.00</span>
                                    </div>
                                    <div class="product-icon">
                                        <div class="product-icon-left f-left">
                                            <input type="hidden" th:value="${book.bookId}"/>
                                            <a href="#" onclick="addToCart(this)"><i class="fa fa-shopping-cart"></i>加入购物车</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <div class="slider-sidebar">
                        <div class="slider-single-img mb-20">
                            <a>
                                <img class="img_a"
                                     src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2653148212,3082258899&fm=26&gp=0.jpg"
                                     alt="" style="width: 262px;height:143px;"/>
                                <img class="img_b"
                                     src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2653148212,3082258899&fm=26&gp=0.jpg"
                                     alt="" style="width: 262px;height:143px;"/>
                            </a>
                        </div>
                        <div class="slider-single-img none-sm">
                            <a>
                                <img class="img_a"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814172228&di=9528664565658ef3afd5e94c897a6ccf&imgtype=0&src=http%3A%2F%2Fpic11.nipic.com%2F20101123%2F2457331_112655897479_2.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                                <img class="img_b"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814172228&di=9528664565658ef3afd5e94c897a6ccf&imgtype=0&src=http%3A%2F%2Fpic11.nipic.com%2F20101123%2F2457331_112655897479_2.jpg"
                                     alt="" style="width: 262px;height:408px;"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- slider-area-end -->

    <!-- all-product-area-start -->
    <div class="all-product-area pb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <!-- bestseller-area -->
                    <div class="bestseller-area dotted-style-2">
                        <div class="section-title">
                            <h3>畅销排行</h3>
                        </div>
                        <div class="single-product-items-active border-1">
                            <div class="single-product-items">
                                <div class="single-product single-product-sidebar white-bg" th:each="book:${books}">
                                    <div class="product-img product-img-left">
                                        <a th:href="'/store/query?bookId='+${book.bookId}">
                                            <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                                 th:src="${book.pictureContent[0].pictureContent}"
                                                 style="width: 104.8px;height: 104.8px" alt=""/>
                                            <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                                 src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                                 alt="" style="width: 104.8px;height: 104.8px"/>
                                        </a>
                                    </div>
                                    <div class="product-content product-content-right">
                                        <div class="pro-title">
                                            <h4><a href="product-details.html" th:text="${book.bookName}">Lounge
                                                Chair</a></h4>
                                        </div>
                                        <div class="pro-rating " th:text="'作者:&emsp;'+${book.author}">
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star-o"></i></a>
                                        </div>
                                        <div class="price-box">
                                            <span class="price product-price" th:text="${book.bookPrice}">$300.00</span>
                                        </div>
                                        <div class="product-icon">
                                            <div class="product-icon-left f-left">
                                                <input type="hidden" th:value="${book.bookId}"/>
                                                <a href="#" onclick="addToCart(this)"><i
                                                        class="fa fa-shopping-cart"></i>加入购物车</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="single-product-items">
                                <div class="single-product single-product-sidebar white-bg" th:each="book:${books2}">
                                    <div class="product-img product-img-left">
                                        <a href="#">
                                            <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                                 th:src="${book.pictureContent[0].pictureContent}"
                                                 style="width: 104.8px;height: 104.8px" alt=""/>
                                            <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                                 src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                                 alt="" style="width: 104.8px;height: 104.8px"/>
                                        </a>
                                    </div>
                                    <div class="product-content product-content-right">
                                        <div class="pro-title">
                                            <h4><a href="product-details.html" th:text="${book.bookName}">Lounge
                                                Chair</a></h4>
                                        </div>
                                        <div class="pro-rating " th:text="'作者:&emsp;'+${book.author}">
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star-o"></i></a>
                                        </div>
                                        <div class="price-box">
                                            <span class="price product-price" th:text="${book.bookPrice}">$300.00</span>
                                        </div>
                                        <div class="product-icon">
                                            <div class="product-icon-left f-left">
                                                <input type="hidden" th:value="${book.bookId}"/>
                                                <a href="#" onclick="addToCart(this)"><i
                                                        class="fa fa-shopping-cart"></i>加入购物车</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <!-- client-area-start  -->
                    <div class="client-area dotted-style-2">
                        <div class="section-title">
                            <h3>好书简介</h3>
                        </div>
                        <div class="clinet-active border-1">
                            <div class="single-client fix white-bg" th:each="a:${news}">
                                <div class="client-content">
                                    <a th:href="'/store/query?bookId='+${a.bookId}"><p th:text="${a.newsContent}"></p>
                                    </a>
                                </div>
                                <div class="clint-img">
                                    <div class="client-img-left">
                                        <img th:unless="${#lists.isEmpty(a.newsPicture)}"
                                             th:src="${a.newsPicture}"
                                             alt="" style="width: 93px;height:93px;"/>
                                        <img th:if="${#lists.isEmpty(a.newsPicture)}"
                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                             alt="" style="width: 93px;height:93px;"/>
                                    </div>
                                    <div class="client-name">
                                        <span th:text="${#dates.format(a.newsDate,'yyyy年MM月dd日 hh:mm:ss')}"> Mr Test</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                    <!-- feature-product-area -->
                    <div class="feature-product-area dotted-style-2">
                        <div class="section-title">
                            <h3>好书上新</h3>
                        </div>
                        <div class="feature-product-active border-1">
                            <div class="single-product  white-bg" th:each="newBook:${newBooks}">
                                <div class="product-img pt-20">
                                    <a th:href="'/store/query?bookId='+${newBook.bookId}">
                                        <img th:unless="${#lists.isEmpty(newBook.pictureContent)}"
                                             th:src="${newBook.pictureContent[0].pictureContent}"
                                             style="width: 211px;height: 211px" alt=""/>
                                        <img th:if="${#lists.isEmpty(newBook.pictureContent)}"
                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                             alt="" style="width: 211px;height: 211px"/>
                                    </a>
                                </div>
                                <div class="product-content product-i">
                                    <div class="pro-title">
                                        <h4><a href="product-details.html" th:text="${newBook.bookName}">Moebius
                                            Table</a></h4>
                                    </div>
                                    <div class="pro-rating" th:text="'作者:&emsp;'+${newBook.author}">
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star-o"></i></a>
                                    </div>
                                    <div class="price-box">
                                        <span class="price product-price" th:text="${newBook.bookPrice}">$262.00</span>
                                    </div>
                                    <div class="product-icon">
                                        <div class="product-icon-left f-left">
                                            <input type="hidden" th:value="${newBook.bookId}"/>
                                            <a href="#" onclick="addToCart(this)"><i class="fa fa-shopping-cart"></i>加入购物车</a>
                                        </div>
                                        <div class="product-icon-right floatright">
                                            <a href="#" data-toggle="tooltip"><i
                                                    class="fa fa-heart-o" title="加入收藏夹"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <span class="new">new</span>
                            </div>
                        </div>
                    </div>
                    <!-- banner-area -->
                    <div class="banner-area ptb-40">
                        <div class="slider-single-img res">
                            <a>
                                <img class="img_a"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814950152&di=6703d0066bb8afa5faac1635bf34d219&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F12%2F58%2F95758PICR3E_1024.jpg"
                                     alt="" style="width: 848px;height: 170px"/>
                                <img class="img_b"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559814950152&di=6703d0066bb8afa5faac1635bf34d219&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F12%2F58%2F95758PICR3E_1024.jpg"
                                     alt="" style="width: 848px;height: 170px"/>
                            </a>
                        </div>
                    </div>
                    <!-- new-product-area -->
                    <div class="feature-product-area dotted-style-2">
                        <div class="section-title">
                            <h3>热门小说</h3>
                        </div>
                        <div class="feature-product-active border-1">
                            <div class="single-product  white-bg" th:each="book:${storyBooks}">
                                <div class="product-img pt-20">
                                    <a th:href="'/store/query?bookId='+${book.bookId}">
                                        <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                             th:src="${book.pictureContent[0].pictureContent}"
                                             style="width: 211px;height: 211px" alt=""/>
                                        <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                             alt="" style="width: 211px;height: 211px"/>
                                    </a>
                                </div>
                                <div class="product-content product-i">
                                    <div class="pro-title">
                                        <h4><a href="product-details.html" th:text="${book.bookName}">Moebius
                                            Table</a></h4>
                                    </div>
                                    <div class="pro-rating" th:text="'作者:&emsp;'+${book.author}">
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star-o"></i></a>
                                    </div>
                                    <div class="price-box">
                                        <span class="price product-price" th:text="${book.bookPrice}">$262.00</span>
                                    </div>
                                    <div class="product-icon">
                                        <div class="product-icon-left f-left">
                                            <input type="hidden" th:value="${book.bookId}"/>
                                            <a href="#" onclick="addToCart(this)"><i class="fa fa-shopping-cart"></i>加入购物车</a>
                                        </div>
                                        <div class="product-icon-right floatright">
                                            <a href="#" data-toggle="tooltip"><i
                                                    class="fa fa-heart-o" title="加入收藏夹"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <span class="sale">热卖</span>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="feature-product-area dotted-style-2">
                        <div class="section-title">
                            <h3>学习殿堂</h3>
                        </div>
                        <div class="feature-product-active border-1">
                            <div class="single-product  white-bg" th:each="book:${studyBooks}">
                                <div class="product-img pt-20">
                                    <a th:href="'/store/query?bookId='+${book.bookId}">
                                        <img th:unless="${#lists.isEmpty(book.pictureContent)}"
                                             th:src="${book.pictureContent[0].pictureContent}"
                                             style="width: 211px;height: 211px" alt=""/>
                                        <img th:if="${#lists.isEmpty(book.pictureContent)}"
                                             src="https://i.loli.net/2019/05/29/5cee3e7b28f3095703.jpg"
                                             alt="" style="width: 211px;height: 211px"/>
                                    </a>
                                </div>
                                <div class="product-content product-i">
                                    <div class="pro-title">
                                        <h4><a href="product-details.html" th:text="${book.bookName}">Moebius
                                            Table</a></h4>
                                    </div>
                                    <div class="pro-rating" th:text="'作者:&emsp;'+${book.author}">
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star"></i></a>
                                        <a href="#"><i class="fa fa-star-o"></i></a>
                                    </div>
                                    <div class="price-box">
                                        <span class="price product-price" th:text="${book.bookPrice}">$262.00</span>
                                    </div>
                                    <div class="product-icon">
                                        <div class="product-icon-left f-left">
                                            <input type="hidden" th:value="${book.bookId}"/>
                                            <a href="#" onclick="addToCart(this)"><i class="fa fa-shopping-cart"></i>加入购物车</a>
                                        </div>
                                        <div class="product-icon-right floatright">
                                            <a href="#" data-toggle="tooltip"><i
                                                    class="fa fa-heart-o" title="加入收藏夹"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <span class="new">畅销</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- all-product-area-end -->
</div>

<script layout:fragment="script">
    var config = {pageTitle: "首页", navActive: "navProduct"};
    $(function () {
        document.title = config.pageTitle;
        $("#" + config.navActive).addClass("active");
        $(".product_vmegamenu").css('display', 'block');
    });

    function addToCart(e) {
        var bookId = $(e).parent().children("input:first").val();
        $.ajax({
            type: "post",
            url: "/book/addToCart",
            data: {
                bookId: bookId
            },
            dataType: "json",
            success: function (json) {
                if (json.msg === 0) {
                    alert("添加成功");
                } else if (json.msg === 1) {
                    alert("请先登录哦");
                }
            }
        });
    }
</script>

</body>
</html>